﻿[data-entity-node] {
    display: none;
}

.entity-node {
    position: relative;
    font-size: 12px;
    border-width: 2px;
    border-style: solid;
    border-radius: 6px;
    border-color: #2980B9;
    background-color: #ECF0F1;
    user-select: none;
    position: absolute;
    min-width: 200px;
    min-height: 100px;
    white-space: nowrap;
    z-index: 2;
}

    .entity-node[data-entity-node] {
        display: block;
    }

    .entity-node[connection-source-entity] {
        border-color: #D35400;
    }

    .entity-node .connection-source-endpoint {
        position: absolute;
        opacity: 0;
        top: 6px;
        width: 14px;
        height: 14px;
        border-radius: 14px;
        border: 1px solid gray;
        background-color: white;
        cursor: crosshair;
        transition-delay: 0.2s;
        transition-property: opacity;
        z-index: 1;
    }

        .entity-node .connection-source-endpoint.left {
            left: -8px;
        }

        .entity-node .connection-source-endpoint.right {
            right: -8px;
        }

        .entity-node .connection-source-endpoint.top {
            top: -8px;
            left: calc((100% - 14px) / 2);
        }

    .entity-node.jtk-drag .connection-source-endpoint {
        opacity: 0 !important;
    }

    .entity-node .entity-caption {
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-color: #2980B9;
        padding: 8px;
    }

    .entity-node[connection-source-entity] .entity-caption {
        border-color: #D35400;
    }

    .entity-node .entity-caption .entity-caption-text {
        width: fit-content;
        min-width: 30px;
    }

    .entity-node .entity-caption .connection-source-endpoint:hover {
        opacity: 1;
        transition-delay: unset;
    }

    .entity-node .property {
        position: relative;
        padding: 4px 8px;
    }

        .entity-node .property .connection-source-endpoint:hover {
            opacity: 1;
            transition-delay: unset;
        }

        .entity-node .property .property-caption {
            margin-right: 8px;
        }

        .entity-node .property[connection-source-property] .property-caption {
            color: #D35400;
        }

        .entity-node .property .property-type {
            color: #7F8C8D;
        }

    .entity-node[data-entity-node-selected] {
        z-index: 3;
    }

        .entity-node[data-entity-node-selected]::before {
            content: " ";
            position: absolute;
            top: -6px;
            left: -6px;
            right: -6px;
            bottom: -6px;
            border: 1px dashed #D35400;
            border-radius: 8px;
            z-index: -1;
        }
